<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11、属性指令-v-bind.html</title>
</head>
<body>

    <div id="app">
        <p>{{title}}</p>
        <p>{{price}}</p>
        <p>{{mark}}</p>
        <p>{{date}}</p>
        <hr>
        <p>{{user.id}} ，{{user.name}}{{user.age}}</p>
        <hr>
        
        <div v-for="(obj,index) in friends">{{index}}==={{friends[index].id}}，{{friends[index].name}}，{{friends[index].age}}</div>
        <hr>
        <div v-for="(obj,index) in friends">{{index}}==={{obj.id}}，{{obj.name}}，{{obj.age}}</div>

    </div>

    <script src="js/vue.global.js"></script>
    <script>
        var vue = Vue.createApp({
            data(){
               return {
                  title:"学习V-for",
                  price:1499,
                  mark:false,
                  date:new Date(),
                  user:{
                      id:1,
                      name:"小文文",
                      age:20
                  },
                  friends:[
                      {id:1,name:"飞哥1",age:35},
                      {id:2,name:"飞哥2",age:15},
                      {id:3,name:"飞哥3",age:13},
                      {id:4,name:"飞哥4",age:5},
                  ]
               }
            },
            methods:{

            }
        }).mount("#app");

    </script>


</body>
</html>